<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Loading...</title>
<style>
body {
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background: #f5f5f5;
}
.loader {
    text-align: center;
}
.stats {
    font-size: 18px;
    color: #333;
    margin: 20px 0;
}
.stats-label {
    color: #666;
    font-size: 14px;
}
</style>
</head>
<body>
<div class="loader">
    <p>Waking up upstream server...</p>
    <div class="stats">
        <div><span class="stats-label">Time elapsed:</span> <span id="elapsed">0s</span></div>
        <div><span id="attempts">&nbsp;</span></div>
    </div>
</div>
<script>
var startTime = Date.now();
var attempts = 0;

setInterval(function() {
    var elapsed = (Date.now() - startTime) / 1000;
    document.getElementById('elapsed').textContent = elapsed.toFixed(1) + 's';
}, 100);

// Check status every second
setInterval(function() {
    attempts++;
    var dots = '.'.repeat((attempts % 10) || 10);
    document.getElementById('attempts').textContent = dots;

    fetch('/status')
        .then(function(r) { return r.text(); })
        .then(function(t) {
            if (t.indexOf('status: ready') !== -1) {
                location.reload();
            }
        })
        .catch(function() {});
}, 1000);
</script>
</body>
</html>
